<%--
  Created by IntelliJ IDEA.
  User: 29012
  Date: 2021/10/7
  Time: 15:10
  To change this template use formatDateile | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>课程首页</title>
    <%--jq--%>
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <%--hearder.css--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/header/header.css">
    <%--设置页面左上角浏览器图标--%>
    <link rel="shortcut icon"  href="image/zhengKe.ico" type="image/x-icon" />
    <%--header.js--%>
    <script src="${pageContext.request.contextPath}/js/header/header.js"></script>
    <%--  course.css  --%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/course/course.css">
    <%--  course.js  --%>
    <script>
        window.onload = function (){
            courses_load(1);
            filter_js();
            paging_selection();
            $('#search_icon').click(function (){
                // alert($('.seach_input').val())
                courses_load_name("java")
            })
        }

        var a = null;
        var b = null;
        var c = null;
        //当前页码
        var nowPage = 1;
        // 请求地址
        var url = "${pageContext.request.contextPath}/getCourse/"

        // 多条件筛选样式
        function filter_js() {
            $(".item").click(function(){
                $(this).parent().children().each(function (){
                    $(this).removeClass("on");
                })
                $(this).addClass("on");
                var screen = $(this).parent().parent().children().first().text();
                if (screen == "方向:"){
                    a = $.trim($(this).text());
                    if (a == "全部")
                        a = null;
                }else if (screen == "分类:"){
                    b = $.trim($(this).text());
                    if (b == "全部")
                        b = null;
                }else if (screen == "难度:"){
                    c = $.trim($(this).text());
                    if (c == "全部")
                        c = null;
                }
                console.log(a+b+c);
                courses_load(nowPage);
            })
        }

        // 课程加载
        function courses_load_name(courseName){
            $('.course_list').html(null);
            var loadUrl = "${pageContext.request.contextPath}/getCourseName/"+courseName
            $.get(loadUrl,{"a":a , "b":b , "c":c},function(courses){
                var course_list = $('.course_list');
                console.log(courses)
                var pages = courses.data.pages;
                // console.log(courses.data.pageNum);\
                nowPage = courses.data.pageNum;
                var courseList = courses.data.list;
                if (courseList != null){
                    for (var i = 0 ; i < courseList.length ; i++){
                        var courseInfo = '<div class="course free">' +
                            '<a href="'+'${pageContext.request.contextPath}'+'/learn/'+ courseList[i].courseId +'">' +
                            '<div class="course_img">' +
                            '<img src="'+ courseList[i].courseMainImg +'" alt="">' +
                            '</div>' +
                            '<p class="title">'+ courseList[i].courseName +'</p>' +
                            '<p class="information">' +
                            '<span class="course_difficulty">'+ courseList[i].courseDifficulty +'</span> · <span class="course_number">'+ courseList[i].courseLearnNumber +'</span>人报名' +
                            '</p>' +
                            '<span class="price">￥ '+ courseList[i].coursePrice +'</span>' +
                            '<!-- <span class="favorite"><i class="Favorite_icon"></i><i class="txt">收藏</i></span> -->' +
                            '</a>' +
                            '</div>';
                        course_list.append(courseInfo);
                    }
                    course_list.append('<div class="course_paging">' +
                        '<ul>' +
                        '</ul>' +
                        '</div>');
                    // 分页加载
                    for (var i = 1 ; i <= pages ; i++){
                        if (i == pageNum){
                            var page = '<li class="page , on">' +
                                i +
                                '</li>'
                        }else{
                            var page = '<li class ="page">' +
                                i +
                                '</li>'
                        }
                        $('.course_paging ul').append(page);
                    }
                }
            }),"json"
        }

        function courses_load(pageNum){
            $('.course_list').html(null);
            var loadUrl = url+pageNum;
            $.get(loadUrl,{"a":a , "b":b , "c":c},function(courses){
                var course_list = $('.course_list');
                var pages = courses.data.pages;
                // console.log(courses.data.pageNum);\
                nowPage = courses.data.pageNum;
                var courseList = courses.data.list;
                if (courseList != null){
                    for (var i = 0 ; i < courseList.length ; i++){
                        var courseInfo = '<div class="course free">' +
                            '<a href="'+'${pageContext.request.contextPath}'+'/learn/'+ courseList[i].courseId +'">' +
                            '<div class="course_img">' +
                            '<img src="'+ courseList[i].courseMainImg +'" alt="">' +
                            '</div>' +
                            '<p class="title">'+ courseList[i].courseName +'</p>' +
                            '<p class="information">' +
                            '<span class="course_difficulty">'+ courseList[i].courseDifficulty +'</span> · <span class="course_number">'+ courseList[i].courseLearnNumber +'</span>人报名' +
                            '</p>' +
                            '<span class="price">￥ '+ courseList[i].coursePrice +'</span>' +
                            '<!-- <span class="favorite"><i class="Favorite_icon"></i><i class="txt">收藏</i></span> -->' +
                            '</a>' +
                            '</div>';
                        course_list.append(courseInfo);
                    }
                    course_list.append('<div class="course_paging">' +
                        '<ul>' +
                        '</ul>' +
                        '</div>');
                    // 分页加载
                    for (var i = 1 ; i <= pages ; i++){
                        if (i == pageNum){
                            var page = '<li class="page , on">' +
                                i +
                                '</li>'
                        }else{
                            var page = '<li class ="page">' +
                                i +
                                '</li>'
                        }
                        $('.course_paging ul').append(page);
                    }
                }
            }),"json"
        }

        //分页
        function paging_selection(){
            $('.course_list').on("click",".page",function(){
                $('.course_list').html(null);
                courses_load($(this).text());
            })
        }
    </script>
</head>
<body>
<%--<c:forEach items="${searchPage}" var="i">
    ${i.courseDifficulty}
</c:forEach>--%>
<div id="header">
    <div id="nav">
        <div id="menu">

            <!-- logo -->
            <div id="logo">
                <a href="#">
                    <svg t="1634123912096" class="icon" viewBox="0 0 1335 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="9038" width="60" height="60">
                        <path d=" M1296.918261
                        267.130435c-199.902609-89.043478-400.695652-170.963478-600.153044-258.671305a79.693913 79.693913
                        0 0 0-62.330434 0C438.53913 94.386087 238.636522 178.086957 44.521739 260.897391c-20.925217
                        8.45913-41.850435 16.918261-41.850435 44.521739s20.925217 37.398261 41.850435
                        44.52174c181.648696 81.92 365.078261 156.716522 548.062609 240.417391a142.024348 142.024348 0 0
                        0 146.031304 0 489.73913 489.73913 0 0 1 83.255652-37.843478c116.646957-49.864348
                        229.286957-99.728696 350.386087-150.038261v421.175652c0 24.932174 8.013913 33.391304 32.946087
                        33.391304s33.391304-4.452174 33.391305-33.391304c0-125.106087
                        4.452174-254.21913-4.006957-379.325217 0-49.864348 8.45913-83.255652
                        62.330435-95.72174a41.850435 41.850435 0 0 0
                        38.733913-41.850434c0-24.932174-17.808696-33.391304-38.733913-39.624348z" p-id="9039"></path>
                        <path d=" M1088.556522 548.507826c0-29.384348-8.013913-29.384348-28.939131-20.925217-112.64
                        51.2-225.28 95.721739-333.467826 146.031304a143.805217 143.805217 0 0 1-116.646956 0C496.862609
                        623.304348 384.222609 578.782609 272.027826
                        527.582609c-20.925217-8.45913-24.932174-4.006957-24.932174 16.918261V712.347826a211.478261
                        211.478261 0 0 0 141.579131 229.286957 640.222609 640.222609 0 0 0 570.768695-8.459131
                        211.923478 211.923478 0 0 0 129.113044-222.608695c-4.006957-53.871304 0-107.742609
                        0-162.059131z" p-id="9040"></path>
                    </svg>
                </a>
            </div>

            <!-- 首页 -->
            <div class="jump">
                <a href="${pageContext.request.contextPath}/index">首页</a>
            </div>

            <!-- 全部课程 -->
            <div class="jump">
                <a href="${pageContext.request.contextPath}/course">全部课程</a>
            </div>

            <!-- 苏鸿社区 -->
            <div class="jump">
                <a href="${pageContext.request.contextPath}/community?label=推荐">苏鸿社区</a>
            </div>

            <!-- 搜索 -->
            <div class="function seach">
                <input type="text" placeholder="请输入关键字..." class="seach_input"/>
                <div class="header_hot">
                    <a href="#" class="hot_info">Vue</a>
                    <a href="#" class="hot_info">Python</a>
                </div>
                <a href="#" id="search_icon">
                    <svg t="1634122309089" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="3764" width="20" height="20">
                        <path d=" M953.474215 908.234504l-152.576516-163.241391c61.92508-74.48211 95.81186-167.36973
                            95.81186-265.073744 0-229.294809-186.63531-415.930119-416.102133-415.930119-229.294809
                            0-415.930119 186.63531-415.930119 415.930119s186.63531 415.930119 415.930119
                            415.930119c60.032925 0 118.00168-12.55703 172.186125-37.327062 16.169326-7.396607
                            23.221905-26.318159
                            15.825298-42.315471-7.396607-16.169326-26.318159-23.221905-42.315471-15.825298-45.927768
                            20.813707-94.951789 31.478582-145.695952 31.478582-194.031917
                            0-351.94087-157.908953-351.94087-351.94087 0-194.031917 157.908953-351.94087
                            351.94087-351.94087 194.031917 0 351.94087 157.908953 351.94087 351.94087 0
                            91.339493-34.918864 177.86259-98.048043 243.743995-12.213002 12.729044-11.868974 33.026709
                            0.860071 45.239711 1.032085 0.860071 2.236183 1.204099 3.268268 2.064169 0.860071 1.204099
                            1.376113 2.752226 2.408198 3.956325l165.477574 177.00252c6.192508 6.70855 14.793214
                            10.148833 23.393919 10.148833 7.912649 0 15.653284-2.92424 21.845792-8.600706C964.827146
                            941.433227 965.515202 921.135562 953.474215 908.234504z" p-id="3765" id="search-img">
                        </path>
                    </svg>
                </a>
            </div>

            <!-- 登录注册 -->
            <div class="function ">
                <div class="consumer">
                    <!-- 登录/注册  -->
                    <c:if test="${empty ServiceResponse}">
                        <a href="${pageContext.request.contextPath}/login/login.jsp" class="head portrait" class="login">
                            <svg t="1634123426498" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="6398" width="30" height="30">
                                <path d=" M880.182 987.568H143.818C98.705 987.568 62 952.882 62 910.245V801.52c0-122.986
                                110.113-223.042 245.455-223.042h409.09C851.887 578.478 962 678.533 962 801.52v108.726c0
                                42.636-36.704 77.322-81.818 77.322z m-736.364-82.197l736.363
                                0.379V801.52c0-77.873-73.408-141.224-163.637-141.224h-409.09c-90.228 0-163.636 63.351-163.636
                                141.224v103.851zM511.67 547.796c-140.984 0-255.682-114.697-255.682-255.682 0-140.984
                                114.697-255.682 255.682-255.682 140.985 0 255.682 114.697 255.682 255.682 0.001 140.985-114.697
                                255.682-255.682 255.682z m0-429.546c-95.871 0-173.864 77.993-173.864 173.864S415.8 465.978
                                511.67 465.978s173.864-77.993 173.864-173.864S607.541 118.25 511.67 118.25z" p-id="6399">
                                </path>
                            </svg>
                        </a>
                    </c:if>
                    <c:if test="${!empty ServiceResponse}">
                        <a href="${pageContext.request.contextPath}/user/mycourse.jsp" class="consumer_portrait">
                            <img src="http://${ServiceResponse.data.consumerProfile}" alt="">
                        </a>
                        <!-- 注销 -->
                        <a href="${pageContext.request.contextPath}/cons/logout" class="logout">
                            <svg t="1634123313659" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="5401" width="30" height="30">
                                <path d=" M424.19 675.833l64.823 64.823 229.869-229.869-229.869-229.869-64.823 64.823 118.612
                                119.072H98.236v91.948h444.567L424.19 675.833zM833.817 97.022H190.183c-51.031 0-91.948
                                41.376-91.948 91.948v183.895h91.948V188.97h643.633v643.633H190.183V648.708H98.236v183.895c0
                                50.571 40.917 91.948 91.948 91.948h643.633c50.571 0 91.948-41.376
                                91.948-91.948V188.97c-0.001-50.571-41.377-91.948-91.948-91.948z" p-id="5402"></path>
                            </svg>
                        </a>
                    </c:if>
                </div>
            </div>

        </div>
    </div>
</div>

<div class="neck">

    <!--    课程筛选器-->
    <div class=" max_1200 filter">
        <!--        <a href="#">Vue</a>-->
        <div class="direction">
                <span>方向:</span>
            <ul class="items">
                <li class="item on">
                    <a href="#">全部</a>
                </li>
                <li class="item ">
                    <a href="#">前端开发</a>
                </li>
                <li class="item ">
                    <a href="#">后端开发</a>
                </li>
                <li class="item ">
                    <a href="#">移动开发</a>
                </li>
                <li class="item ">
                    <a href="#">计算机基础</a>
                </li>
                <li class="item ">
                    <a href="#">前沿技术</a>
                </li>
                <li class="item ">
                    <a href="#">云计算&amp;大数据</a>
                </li>
                <li class="item ">
                    <a href="#">运维&amp;测试</a>
                </li>
                <li class="item ">
                    <a href="#">数据库</a>
                </li>
                <li class="item ">
                    <a href="#">UI设计&amp;多媒体</a>
                </li>
                <li class="item ">
                    <a href="#">游戏</a>
                </li>
                <li class="item ">
                    <a href="#">求职面试</a>
                </li>
            </ul>
        </div>
        <div class="classification">
                <span>分类:</span>
            <ul class="items">
                <li class="item on">
                    <a href="#">全部</a>
                </li>
                <li class="item ">
                    <a href="#">JavaScript</a>
                </li>
                <li class="item ">
                    <a href="#">HTML/CSS</a>
                </li>
                <li class="item ">
                    <a href="#">Vue.js</a>
                </li>
                <li class="item ">
                    <a href="#">React.JS</a>
                </li>
                <li class="item ">
                    <a href="#">Angular</a>
                </li>
                <li class="item ">
                    <a href="#">Node.js</a>
                </li>
                <li class="item ">
                    <a href="#">jQuery</a>
                </li>
                <li class="item ">
                    <a href="#">Bootstrap</a>
                </li>
                <li class="item ">
                    <a href="#">PHP</a>
                </li>
                <li class="item ">
                    <a href="#">.net</a>
                </li>
                <li class="item ">
                    <a href="#">Rust</a>
                </li>
                <li class="item ">
                    <a href="#">Android</a>
                </li>
                <li class="item ">
                    <a href="#">iOS</a>
                </li>
                <li class="item ">
                    <a href="#">求职面试</a>
                </li>
            </ul>
        </div>
        <div class="difficulty">
                <span>难度:</span>
            <ul class="items">
                <li class="item on">
                    <a href="#">全部</a>
                </li>
                <li class="item ">
                    <a href="#">零基础</a>
                </li>
                <li class="item ">
                    <a href="#">初阶</a>
                </li>
                <li class="item ">
                    <a href="#">进阶</a>
                </li>
                <li class="item ">
                    <a href="#">高阶</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- 课程列表 -->
<div class="main">
    <div class="course_list">
    </div>
</div>
</body>
</html>
